<template>
  <div class="order-box">
    <el-card class="order-card">
      <template #header>
        <div class="order-card-header">
          <span>挂号详情</span>
        </div>
      </template>
      <div class="message-info">
        <el-tag type="success"
          >&nbsp;√&nbsp;{{
            orderInfo.param ? orderInfo.param.orderStatusString : ""
          }}</el-tag
        >
        <div class="rig-info">
          <img src="@/assets/imgs/code_login_wechat.png" />
          <div class="rig-text">
            <div>微信&nbsp;关注&nbsp; &nbsp;“北京114预约挂号”</div>
            <div>&nbsp;“快速预约挂号”</div>
          </div>
        </div>
      </div>
      <hr />
      <div class="main-message">
        <div class="main-message-table">
          <table>
            <tr>
              <td>就诊人信息</td>
              <td>{{ orderInfo.patientName }}</td>
            </tr>
            <tr>
              <td>就诊日期</td>
              <td>{{ orderInfo.reserveDate }}</td>
            </tr>
            <tr>
              <td>就诊医院</td>
              <td>{{ orderInfo.hosname }}</td>
            </tr>
            <tr>
              <td>就诊科室</td>
              <td>{{ orderInfo.depname }}</td>
            </tr>
            <tr>
              <td>医生职称</td>
              <td>{{ orderInfo.title }}</td>
            </tr>
            <tr>
              <td>医事服务费</td>
              <td style="color: red">{{ orderInfo.amount }}</td>
            </tr>
            <tr>
              <td>挂号订单</td>
              <td>{{ orderInfo.outTradeNo }}</td>
            </tr>
            <tr>
              <td>挂号时间</td>
              <td>{{ orderInfo.createTime }}</td>
            </tr>
          </table>
          <div
            class="btn"
            v-if="orderInfo.orderStatus == 0 || orderInfo.orderStatus == 1"
          >
            <el-popconfirm title="确认取消吗？" @confirm="cancel">
              <template #reference>
                <el-button>取消预约</el-button>
              </template>
            </el-popconfirm>
            <el-button type="primary" @click="toPayment">支付</el-button>
          </div>
        </div>
        <el-card class="main-card">
          <template #header>
            <div class="main-card-header">
              <span>注意事项</span>
            </div>
          </template>
          <div class="main-center">
            <div>
              1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；
            </div>
            <div class="import-text">
              2.【取号】就诊当天需在2024-01-0209:00前
              在医院一层114窗口取号，未取号视为爽约，该号不退不换；
            </div>
            <div>
              3.【退号】在2024-01-01 15:30可在线退号 ，逾期将不可办理退号退费；
            </div>
            <div>
              4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
            </div>
            <div>
              5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。
            </div>
          </div>
        </el-card>
      </div>
    </el-card>
    <el-dialog
      title="微信支付"
      width="30%"
      v-model="dialogVisible"
      @close="close"
    >
      <div class="pay-dialog-box">
        <img :src="codeUrl" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="close">关闭窗口</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqOrderInfo,
  reqCancelOrder,
  reqGetQrcode,
  reqPayResult,
} from "@/api/UserPage";
import QRCode from "qrcode";
export default {
  name: "detailPage",
  data() {
    return {
      orderInfo: {},
      dialogVisible: false,
      codeUrl: "",
      timer: "",
    };
  },
  methods: {
    async getOrderInfo() {
      let result = await reqOrderInfo(this.$route.query.orderId);
      if (result.code == 200) {
        this.orderInfo = result.data;
      }
    },
    async cancel() {
      let result = await reqCancelOrder(this.$route.query.orderId);
      console.log(result);
      if (result.code == 200) {
        this.$message({
          type: "success",
          message: result.message,
        });
        this.getOrderInfo();
      }
      if (result.code == 225) {
        this.$message({
          type: "error",
          message: result.message,
        });
      }
    },
    async toPayment() {
      this.dialogVisible = true;
      let result = await reqGetQrcode(this.$route.query.orderId);
      if (result.code == 200) {
        this.codeUrl = await QRCode.toDataURL(result.data.codeUrl);
      }
      this.timer = setInterval(async () => {
        let result = await reqPayResult(this.$route.query.orderId);
        if (result.data) {
          this.dialogVisible = false;
          // 清除定时器
          clearInterval(this.timer);
          this.message({
            type: "success",
            message: "支付成功",
          });
          this.getOrderInfo();
        }
      }, 2000);
    },
    close() {
      // 关闭弹窗
      this.dialogVisible = false;
      // 关闭定时器
      clearInterval(this.timer);
    },
  },
  mounted() {
    this.getOrderInfo();
  },
};
</script>

<style lang="scss" scoped>
.order-box {
  .message-info {
    height: 40px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .rig-info {
      height: 100%;
      display: flex;
      img {
        height: 90%;
        margin-right: 5px;
      }
      .rig-text {
        height: 80%;
        display: flex;
        flex-direction: column;
        font-size: 12px;
        justify-content: space-around;
      }
    }
  }
  .main-message {
    height: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .main-message-table {
      width: 37%;
      table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #e2e1e1;
        margin-bottom: 10px;
        tr {
          td {
            border: 1px solid #e2e1e1;
            padding: 14px;
            font-size: 14px;
          }
          td:nth-child(2n + 1) {
            background-color: #f5f7fa;
            font-weight: 900;
            color: #606266;
            width: 36%;
          }
        }
      }
    }
    .main-card {
      width: 60%;
      .main-center {
        line-height: 30px;
        .import-text {
          color: red;
        }
      }
    }
  }
  .pay-dialog-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ::v-deep .el-dialog__body {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
}
</style>
